<template>
  <div class="table-relation">
    <div v-for="(data, index) in relationDatas" :key="index" class="relation-list">
      <div v-if="data.obj.length > 0 || data.type == 'funcList'" class="list-title">
        <i style="margin-right: 6px" class="fas fa-clipboard-list"></i>{{ data.typeName }}
      </div>
      <div v-if="data.type == 'funcList'" class="funcList">
        <div
          v-for="obj in data.obj"
          :key="obj.id"
          class="list-context"
          :style="`margin-left:${obj.INDENTATION * 15 + 12 * (obj.INDENTATION - 1)}px;`"
          @click="openFuncModal(data, obj)"
        >
          <i
            v-if="data.type == 'funcList' && obj.INDENTATION > 0"
            :style="`color:#D7D7D7;font-size:10px !important;`"
            class="treeicon jeicon jeicon-right"
          ></i>
          <i
            v-if="data.type == 'funcList'"
            class="jeicon jeicon-menu-module"
            style="margin-left: 8px"
          ></i>
          <span
            v-if="data.type == 'funcList'"
            :style="`color:${obj.highlight == '1' ? '#d70000' : '#3F3F3F'};margin-left:5px;`"
          >
            {{ obj.FUNCINFO_FUNCNAME }}（{{ obj.FUNCINFO_FUNCCODE }}）
          </span>
          <span v-else style="margin-left: 5px">{{ obj.tableName }}（{{ obj.tableCode }}）</span>
        </div>
      </div>
      <div v-else>
        <div
          v-for="obj in data.obj"
          :key="obj.id"
          class="list-context"
          @click="openFuncModal(data, obj)"
        >
          <span v-if="data.type == 'parentList'" class="beforesign"></span>
          <span v-if="data.type == 'childList'" class="aftersign"></span>
          <i
            v-if="data.type == 'parentList' || data.type == 'childList'"
            class="jeicon jeicon-table"
          ></i>
          <i v-if="data.type == 'viewList'" class="jeicon jeicon-treetable"></i>
          <i v-if="data.type == 'menusList'" class="jeicon jeicon-treetable"></i>
          {{ obj.tableName }}（{{ obj.tableCode }}）
        </div>
      </div>
      <div v-if="data.type == 'funcList'" class="funcadd" @click="addFuncModal()">
        <i class="fal fa-plus"></i>
      </div>
    </div>
  </div>
  <div v-if="addFuncType" class="modal">
    <ModalAddFunc
      v-if="addFuncType"
      :table-info-data="tableInfoData"
      :product-data="productData"
      @closeModal="closeModal"
    />
  </div>
</template>

<script>
  import { defineComponent, ref, watch, onMounted } from 'vue';
  import { getRelationData } from '../../api/index';
  import { Modal } from '@jecloud/ui';
  import VueEvent from '../../helper/model/event';
  import ModalAddFunc from './modal/addfunc.vue';
  import { useMicroStore } from '@common/store/micro-store';
  import { getAxiosBaseURL } from '@jecloud/utils';
  import { useGlobalStore } from '@common/store/global-store';

  export default defineComponent({
    name: 'TableRelation',
    components: {
      ModalAddFunc,
    },
    props: {
      tabKey: {
        type: String,
        default: '',
      },
      refreshRelation: {
        type: Boolean,
      },
      tableInfoData: {
        required: true,
        type: Object,
        default: () => {
          return {};
        },
      },
      productData: {
        type: Object,
        required: true,
        default: () => {
          return {};
        },
      },
    },
    emits: ['checkedTable'],
    setup(props, { emit }) {
      const { activePlan } = useGlobalStore();
      const microStore = useMicroStore();
      const pkValue = ref(props.tabKey);
      const addFuncType = ref(false);
      const relationDatas = ref([
        {
          type: 'parentList',
          typeName: '父表信息',
          obj: [],
        },
        {
          type: 'childList',
          typeName: '子表信息',
          obj: [],
        },
        {
          type: 'viewList',
          typeName: '视图信息',
          obj: [],
        },
        {
          type: 'funcList',
          typeName: '功能信息',
          obj: [],
        },
        {
          type: 'menusList',
          typeName: '菜单信息',
          obj: [],
        },
      ]);

      const getRelationDatas = () => {
        getRelationData({ JE_CORE_RESOURCETABLE_ID: pkValue.value })
          .then((data) => {
            relationDatas.value.forEach((item) => {
              item.obj = data[item.type];
            });
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };

      onMounted(() => {
        if (pkValue.value != '' && pkValue.value != undefined) {
          getRelationDatas();
        }
      });

      //点击每一项
      const openFuncModal = (data, obj) => {
        if (data.type == 'parentList' || data.type == 'childList') {
          emit('checkedTable', { key: obj.id, title: obj.tableName });
          VueEvent.emit('checkedTreeNode', {
            id: [obj.id],
            checked: true,
          });
          //打开功能配置
        } else if (data.type == 'funcList') {
          microStore.emitMicro('JE_CORE_FUNCTION_CONFIG', 'table-show-function-init', {
            funcId: obj.JE_CORE_FUNCINFO_ID,
          });
          // 打开菜单
        } else if (data.type == 'menusList') {
          window.open(`${getAxiosBaseURL()}/#/${activePlan}/app/${obj.id}`);
        }
      };

      //添加功能
      const addFuncModal = () => {
        if (props.tableInfoData.RESOURCETABLE_ISCREATE == '1') {
          addFuncType.value = true;
        } else {
          Modal.alert('请您先应用资源表，再创建功能！', 'error');
        }
      };

      const closeModal = (type) => {
        addFuncType.value = false;
        if (type == 'add') {
          getRelationDatas();
        }
      };

      //刷新数据
      watch(
        () => props.refreshRelation,
        (newVal) => {
          if (newVal != undefined) {
            getRelationDatas();
          }
        },
      );

      return {
        relationDatas,
        openFuncModal,
        addFuncModal,
        pkValue,
        getRelationDatas,
        addFuncType,
        closeModal,
      };
    },
  });
</script>

<style lang="less" scoped>
  .table-relation {
    padding: 0 35px 23px 35px;
    height: 100%;
    overflow: auto;
    .relation-list {
      margin-top: 31px;
      .funcList {
        margin-left: 37px;
        .list-context {
          margin-left: 0px;
          position: relative;
          .treeicon {
            position: absolute;
            left: -12px;
            top: -3px;
          }
        }
      }
      .list-title {
        font-size: 18px;
        color: #3265f5;
        margin-bottom: 18px;
      }
      .list-context {
        font-size: 14px;
        color: #333333;
        margin-top: 10px;
        margin-left: 37px;
        cursor: pointer;
        i {
          color: #3265f5;
        }
        &:hover {
          color: #3265f5;
        }
        .beforesign {
          position: relative;
          margin-right: 8px;
          &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            background: #d70000;
            position: absolute;
            top: 4px;
            left: 0;
          }
        }
        .aftersign {
          position: relative;
          margin-right: 8px;
          &::after {
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            background: #3265f5;
            position: absolute;
            bottom: 4px;
            left: 0;
          }
        }
      }
      .funcadd {
        width: 150px;
        height: 32px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        font-size: 16px;
        line-height: 32px;
        text-align: center;
        margin-left: 37px;
        margin-top: 14px;
        color: #e6e6e6;
        cursor: pointer;
        &:hover {
          color: #3265f5;
        }
      }
    }
  }
</style>
